<template>
  <div>
    <li v-if="userTaskItem.length===0" class="empty">暂无数据</li>
    <li v-else class="todo-item"  v-for="item in userTaskItem" :key="item.id">
        <input type="checkbox" @change="changeCheckedToDoItem(item.id)"  :checked='item.done'> {{item.value}} <button class="del-item" @click="delToDoListItemById(item.id)">删除</button>
    </li>   
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
    name:'Item',
    setup(props,{emit}) {
      let userTaskItem = inject('userTaskItem')

      /* 删除当前任务 */
      function delToDoListItemById(id){
        if (!confirm('确认要删除该任务吗?')) return
        emit('delToDoListItemById', id)        
      }  

      /* 改变当前任务选中状态 */    
      function changeCheckedToDoItem(id){
        emit('changeCheckedToDoItem', id)
      }

      return{
        userTaskItem,
        delToDoListItemById,
        changeCheckedToDoItem
      }
    }
}
</script>

<style scoped>
section ul li{
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E9E9E9;  
    border-radius:5px;  
}

section ul li:last-of-type{
    border-bottom: none;
}

section ul:nth-last-child(1){
    border-bottom: none;
}

section ul li:hover{
    background-color: rgb(235, 234, 234);        
    cursor: pointer;
}

section ul li input{
    margin-right: 10px;
}

section ul li button{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
</style>>
